<template>
  <view>
    <view class="shop-homg-head-height" :style="{ paddingTop: (config.isStatusBar ? StatusBarRpx : 0) + 'rpx' }"></view>
    <view :style="headStyle" class="shop-homg-head">
      <view class="shop-homg-status">
        <text>{{ config.title }}</text>
        <image class="sign-icon" @click.stop="handleJumpDiy" data-url="/pages/wd/signinPage/signinPage"
          v-if="config.signIcon" :src="config.signIcon" mode="widthFix" />
        <view class="message-icon" @click.stop="handleJumpDiy" data-url="/pages/wd/myNews/myNews"
          v-if="config.messageIcon">
          <benben-message-num class="benben-message-num" :message-num="messageNum" size="24" color="#fff"
            background-color="red" v-if="isLogin === true"></benben-message-num>
          <image :src="config.messageIcon" mode="widthFix" />
        </view>
      </view>
      <view :style="{ backgroundColor: config.seachBackgroundColor }" class="seach-input">
        <text class="fu-iconfont2 seach-icon">&#xe741;</text>
        <swiper style="height: 100%" autoplay circular vertical>
          <swiper-item @click.stop="handleJumpDiy" :data-url="`/pages/sy/search/search?keyword=${item.name}`"
            v-for="(item, i) in seachList" :key="i">
            <view class="text-cut">{{ item.name }}</view>
          </swiper-item>
        </swiper>
      </view>
      <benben-flex-tabs v-if="tabs.length" class-name="benbenTabsfd0_0" v-model="tabsType" ref="benben_tabsfd0_0"
        select-mark="benben_tabsfd0_0" key="benben_tabsfd0_0" :open-title-type="false" :open-sticky="false" :top="0"
        :is-show-content="false" :scrollspy="false" @change="getGrid" :tabs-info.sync="tabsInfofd0_0">
        <scroll-view @scroll="tabsInfofd0_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd0_0"
          class="benben-tabs" :scroll-x="true" :scroll-left.sync="tabsInfofd0_0.moveX"
          scroll-with-animation="all .3s ease">
          <view class="benben-tabs-content" id="benben_tabsfd0_0-content">
            <view id="benben_tabsfd0_0-title" class="benben-tabs-title flex align-center flex">
              <view v-for="(item, key0) in tabs" :key="key0"
                :class="{ checkTitlefd0_0: tabsType == item.aid, 'tabs-item': true }" @tap="tabsType = item.aid"
                :id="`benben_tabsfd0_0-title-item-${item.aid}`">
                {{ item.name }}
              </view>
            </view>
            <image :style="{ left: tabsInfofd0_0.lineleft }" id="benben_tabsfd0_0-line" class="benben-tabs-line"
              src="https://ttk-saas.oss-cn-beijing.aliyuncs.com/m1899/e6e65da63bef0b24bb5cbe1e82f0a7dd.png"
              mode="widthFix" />
          </view>
        </scroll-view>
        <!-- <view class="rightfd0_0_c0"> 更多 </view> -->
      </benben-flex-tabs>
    </view>
    <view :style="{
        marginLeft: config.backgroundMargin + 'rpx',
        marginRight: config.backgroundMargin + 'rpx',
        backgroundColor: config.backgroundColor,
        marginBottom: config.pageMargin + 'rpx',
      }" :class="{ 'shop-radius': config.isRadius }">
      <view class="shop-grid" v-if="gridList.length == 1">
        <view @click.stop="handleJumpDiy" :data-url="`/pages/fl/commodityList/commodityList?cid=${item.aid}`"
          v-for="(item, j) in gridList[0]" :key="j" class="grid_item" :style="gridStyle">
          <image :class="{ 'icon-radius': config.iconRadius }" style="width: 80rpx; height: 80rpx" :src="item.thumb"
            mode="scaleToFill" />
          <text class="text-cut">{{ item.name }}</text>
        </view>
      </view>
      <template v-if="gridList.length > 1">
        <swiper @change="swiperChange" style="width: 100%" :style="{ height: config.rowNum * 150 + 'rpx' }"
          :indicator-dots="false" circular>
          <swiper-item class="shop-grid" v-for="(swiperItem, index) in gridList" :key="index">
            <view @click.stop="handleJumpDiy" :data-url="`/pages/fl/commodityList/commodityList?cid=${item.aid}`"
              v-for="(item, j) in swiperItem" :key="j" class="grid_item" :style="gridStyle">
              <image :class="{ 'icon-radius': config.iconRadius }" style="width: 80rpx; height: 80rpx" :src="item.thumb"
                mode="scaleToFill" />
              <text class="text-cut">{{ item.name }}</text>
            </view>
          </swiper-item>
        </swiper>
        <div :class="'indicator_box ' + config.indicatorType">
          <div v-for="(item, i) in gridList"
            :style="{ 'background-color': index == i ? config.indicatorActiveColor : config.indicatorColor }"
            class="indicator_item"></div>
        </div>
      </template>
    </view>
  </view>
</template>
<script>
  import {
    API_VERSION
  } from '@/common/config.js'
  export default {
    name: 'shop-homg-head',
    props: {
      config: {
        type: Object,
        default: () => ({}),
      },
    },
    components: {},
    data() {
      return {
        tabsInfofd0_0: {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0,
        },
        tabs: [],
        tabsType: '0',
        api: `/${API_VERSION}/641591a873763`,
        tabsApi: `/${API_VERSION}/641590baa0d47`,
        seachApi: `/${API_VERSION}/641af9cb8b32f`,
        messageApi: `/${API_VERSION}/64241ca6cf066`, //获取消息数量
        gridList: [],
        seachList: [],
        index: 0,
        messageNum: 0,
      }
    },
    created() {
      this.showCallback()
    },
    computed: {
      headStyle() {
        return `marginBottom: ${this.config.pageMargin}rpx;  backgroundColor: ${this.config.backgroundColor}; backgroundImage:${
        this.config.backgroundImage
      }; paddingTop:${this.config.isStatusBar ? this.StatusBarRpx : 0}rpx;color:${this.config.color}; --seach-color:${this.config.seachColor}`
      },
      gridStyle() {
        return `width:calc(100% / ${this.config.colNum})`
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true
      },
    },
    watch: {},
    mounted() {},
    methods: {
      swiperChange(e) {
        this.index = e.detail.current
      },
      handleGrid(item) {
        this.dynamicJump(item.href)
      },
      refresh() {
        this.showCallback()
      },
      showCallback() {
        this.getTabs()
        this.getSeach()
        this.getmessageNum()
      },
      pullUp() {},
      async getmessageNum() {
        if (!this.isLogin) return (this.messageNum = 0)
        try {
          let {
            data: {
              data,
              code,
              msg
            },
          } = await this.$api.get(this.messageApi)
          if (code != 1) return (this.messageNum = 0)
          this.messageNum = data.all
        } catch (error) {
          console.log(error)
        }
      },
      //商品管理-获取一级商品分类
      async getTabs() {
        //请求方法
        //数据验证
        let {
          data: {
            data,
            code,
            msg
          },
        } = await this.$api.get(this.tabsApi)
        if (code != 1) return (this.tabs = [])
        if (data.length) {
          this.tabs = data
          this.tabsType = data[0].aid
          this.index = 0
          this.getGrid()
        }
      },
      async getSeach() {
        let {
          data: {
            data,
            code,
            msg
          },
        } = await this.$api.get(this.seachApi)
        if (code != 1) return
        this.seachList = data
      },
      async getGrid() {
        try {
          let {
            data: {
              data: {
                category_list: data
              },
              code,
              msg,
            },
          } = await this.$api.get(this.api, {
            pid: this.tabsType
          })
          if (code != 1) return (this.adList = [])

          function splitArray(array, chunkSize) {
            const chunks = []
            for (let i = 0; i < array.length; i += chunkSize) {
              chunks.push(array.slice(i, i + chunkSize))
            }
            return chunks
          }
          this.gridList = splitArray(data, this.config.rowNum * this.config.colNum)
        } catch (error) {
          console.log(error)
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .shop-homg-head-height {
    height: 250rpx;
    box-sizing: content-box;
  }

  .shop-homg-head {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100vw;
    box-sizing: content-box;
    background-size: 100% auto;
    background-repeat: no-repeat;

    .shop-homg-status {
      padding: 0 32rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 600;

      text {
        margin-right: auto;
      }

      .sign-icon {
        margin-left: 24rpx;
        width: 40rpx;
      }

      .message-icon {
        position: relative;
        margin-left: 24rpx;
        width: 40rpx;

        image {
          width: 100%;
        }

        .benben-message-num {
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          z-index: 10;
        }
      }
    }

    .seach-input {
      width: 686rpx;
      margin: 0 auto;
      padding: 0 24rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      color: var(--seach-color);

      .seach-icon {
        font-size: 24rpx;
        margin-right: 12rpx;
      }

      swiper {
        flex: 1;
      }
    }
  }

  .benben-tabs {
    width: 750rpx;

    .benben-tabs-content {
      position: relative;
      display: inline-block;
      height: 80rpx;

      .benben-tabs-title {
        height: 100%;

        .tabs-item {
          padding: 0 32rpx;
          flex-shrink: 0;
        }

        .checkTitlefd0_0 {
          font-weight: 700;
          font-size: 28rpx;
        }
      }

      .benben-tabs-line {
        position: absolute;
        bottom: 10rpx;
        transform: translateX(-50%);
        transition: all 0.4s ease;
        width: 40rpx;
      }
    }
  }

  .rightfd0_0_c0 {
    width: 120rpx;
    line-height: 80rpx;
  }

  ::v-deep .benbenTabsfd0_0 {
    width: 750rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-align: center;
  }

  .shop-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    .grid_item {
      .icon-radius {
        border-radius: 50%;
      }

      padding: 12rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      text {
        font-size: 28rpx;
        width: 80%;
        padding-top: 10rpx;
        display: block;
        margin: auto;
        text-align: center;
      }
    }
  }

  .indicator_box {
    width: 100%;
    // position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30rpx;

    .indicator_item {
      margin: 0 5rpx;
    }

    &.round {
      .indicator_item {
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
      }
    }

    &.square {
      .indicator_item {
        width: 20rpx;
        height: 5rpx;
      }
    }
  }
</style>